<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加用户</h3>
        <h3 class="msg"></h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">

            <div class="form-group">
                <label class="col-sm-2 control-label" for="usernameId">用户名</label>
                <div class="col-sm-10">
                    <input class="form-control" id="usernameId" name="username" type="text">
                </div>
            </div>
            <div class="form-group" id="pwdDiv">
                <label class="col-sm-2 control-label" for="passwordId">密码</label>

                <div class="col-sm-10">
                    <input class="form-control" id="passwordId" name="password" type="password">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="deptId">所属部门</label>
                <div class="col-sm-10">
                    <input class="form-control load-sys-dept" id="deptId" placeholder="上级部门" readonly="readonly"
                           type="text">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="emailId">邮箱</label>
                <div class="col-sm-10">
                    <input class="form-control" id="emailId" name="email" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="phoneId">手机号</label>
                <div class="col-sm-10">
                    <input class="form-control" id="phoneId" name="mobile" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="rolesId">角色</label>
                <div class="col-sm-10" id="rolesId">

                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button class="btn btn-default btn-cancel" type="button">Cancel</button>
            <button class="btn btn-info pull-right btn-save" type="button">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" contype="object" id="treeLayer" showtime="0"
         style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none" times="2"
         type="page">
        <div class="layui-layer-title" style="cursor: move;">选择部门</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div class="layui-layer-wrap" style="padding: 10px;">
                <ul class="ztree" id="zTreeId"></ul>    <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a
                class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel"></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm">确定</a>
            <a class="layui-layer-btn1 btn-cancel">取消</a>
        </div>
    </div>
</div>
<script src="bower_components/ztree/jquery.ztree.all.min.js" type="text/javascript"></script>
<script src="bower_components/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">
    var zTree;
    //初始化zTree时会用到
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",  //节点数据中保存唯一标识的属性名称
                pIdKey: "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId: null  //根节点id
            }//json 格式javascript对象
        }
    }//json 格式的javascript对象
    $(document).ready(function () {
        //页面加载完成以后加载角色信息并初始化页面
        doLoadRoles();
        //事件注册
        $(".box-footer")
            .on("click", ".btn-cancel", doCancel)
            .on("click", ".btn-save", doSaveOrUpdate);

        $("#treeLayer")
            .on("click", ".btn-cancel", doHideTree)
            .on("click", ".btn-confirm", doConfirm);

        $(".form-horizontal")
            .on("click", ".load-sys-dept", doLoadZTreeNodes);
    });

    function doHideTree() {
        $("#treeLayer").css("display", "none");
    }

    //确定按钮
    function doConfirm() {
        //1.获取选中的记录(id,name);
        var selectedNodes = zTree.getSelectedNodes();
        var node = selectedNodes[0];
        //2.将id和name填写或绑定在具体对象上
        $("#deptId").val(node.name);
        console.log("node.id=" + node.id)
        $("#deptId").data("deptId", node.id)
        //3.隐藏zTree对应的Div
        doHideTree();
    }

    function doLoadZTreeNodes() {
        var url = "dept/doFindZTreeNodes";
        $("#treeLayer").css("display", "block");
        $.getJSON(url, function (result) {
            if (result.state == 1) {
                zTree = $.fn.zTree.init($("#zTreeId"), setting, result.data);
            } else {
                alert(result.message);
            }
        });
    }

    function doCancel() {
        $("#mainContentId").removeData("rowData");
        $("#mainContentId").load("user/user_list");
    }

    function doSaveOrUpdate() {
        var rowData = $("#mainContentId").data("rowData");
        //1.获取表单数据
        var params = doGetEditFormData();
        if (rowData) params.id = rowData.user.id;
        //2.发起异步请求
        var insertUrl = "user/doSaveObject";
        var updateUrl = "user/doUpdateObject";
        var url = rowData ? updateUrl : insertUrl;
        console.log(params);
        $.post(url, params, function (result) {
            if (result.state == 1) {
                alert(result.message);
                doCancel();
            } else {
                alert(result.message);
            }
        })
    }

    function doGetEditFormData() {
        //获取用户输入的数据
        var params = {
            username: $("#usernameId").val(),
            password: $("#passwordId").val(),
            email: $("#emailId").val(),
            mobile: $("#phoneId").val(),
            deptId: $("#deptId").data("deptId")
        }
        //获取选择的角色
        var roleIds = new Array();
        $("#rolesId input[name='roleId']")
            .each(function () {
                if ($(this).prop("checked")) {
                    roleIds.push($(this).val());
                }
            });
        params.roleIds = roleIds.toString();
        return params;
    }

    function doLoadRoles() {
        var url = "role/doFindRoles"
        $.getJSON(url, function (result) {
            if (result.state == 1) {
                doInitPageRoles(result.data);
                doInitFormData();//修改时
            } else {
                alert(result.message);
            }
        })
    }

    function doInitFormData() {
        var data = $("#mainContentId").data("rowData");
        if (!data) return;
        $("#pwdDiv").remove();
        console.log(data);
        //初始化用户信息
        $("#usernameId").val(data.user.username);
        $("#deptId").val(data.user.sysDept ? data.user.sysDept.name : '');
        $("#deptId").data("deptId", data.user.sysDept ? data.user.sysDept.id : '');
        $("#emailId").val(data.user.email);
        $("#phoneId").val(data.user.mobile);
        //初始化用户角色信息
        var ids = data.roleIds;
        for (var i in ids) {
            $("#rolesId input[value='" + ids[i] + "']")
                .prop("checked", true);
        }
    }

    function doInitPageRoles(data) {//List<CheckBox>
        //1.获取角色要显示的位置对象
        var div = $("#rolesId");
        div.empty();
        //2.迭代数据，将数据追加到div
        var input = "<input type='checkbox' name='roleId' value='[id]'>[name]"
        for (var i in data) {
            //记住每次replace时都会产生一个新的字符串对象
            var newInput =
                input.replace("[id]", data[i].id)
                    .replace("[name]", data[i].name);
            div.append(newInput)
        }
    }
</script>
    
    
    
    
    
    
    